{% extends 'basic/layout/page_basic_bread_query.html' %}
{% load static %}

<!-- Title -->
{% block title %} 菜单管理 {% endblock %}


<!-- CSS -->
{% block css %}
    <style>
        .contentArea i:hover {
            color: red;
            font-weight: bold;
        }
    </style>
{% endblock %}


<!-- Bread -->
{% block breadsecond %} 用户角色 {% endblock %}
{% block breadthird %} 菜单管理 {% endblock %}

<!-- Content -->
{% block excontent %}
    <!-- 内容03: 展示院系 -->
    <div class="contentArea">
    </div>

    <!-- 内容03: 展示院系 -->
    <div class="layerArea" style="display: none; padding: 20px;">
        <form class="layui-form" id="layerForm" lay-filter="layerForm">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline" style="display: none">
                    <label class="layui-form-label" for="id"><b>编号：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="id" name="id" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="title"><b>菜单名称：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" class="layui-input">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="icon"><b>菜单图标：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="icon" name="icon" class="layui-input">
                        <span class="error_msg" style="color:red; position: absolute"></span>
                    </div>
                </div>
            </div>
        </form>
    </div>

{% endblock %}


<!-- JS -->
{% block js %}
    <script>
        let Operation = 0; // 1--添加 2--修改
        $(function () {
            initPage();
            // 加载院系数据展示在页面
            loadData();

            // 响应所有的按钮点击
            buttonClick();
        });
        // =========== 初始化页面 ================
        function initPage() {
            layui.use(['element','form'], function () {
                let element = layui.element;
                let form = layui.form;
            })
        }
        // =========== 加载数据 ===================
        function loadData() {
            // 使用异步请求获取数据
            $.ajax({
                url: "{% url 'list_menu' %}",
                method: 'post',
                data: {
                    queryStr: $('#queryStr').val(),
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                dataType: 'json',
                success: function (res) {
                    // 判断
                    if (res.status) {
                        showInPage(res.data);
                    } else {
                        layui.layer.msg(res.error);
                    }
                }
            })
        }

        // ========== 把院系信息以块状展示在页面 ==========
        function showInPage(data) {
            // 获取对象
            let targetContainer = $('.contentArea');
            // 清空集合
            targetContainer.empty();
            // 遍历
            $.each(data, function (name, value) {

                // 新建一个外层的集合
                let child = $('<div>').attr('class', 'layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg2').css('margin-bottom', '20px');
                // 新建一个子集集合
                let childInner = $('<div>').attr('style', 'width: 80%;height: 200px;background-color:lightblue;border-radius: 10px;margin: auto;text-align: center;font-size:18px;').appendTo(child);
                // 新建一个div
                $('<div>').text(value.title).attr('name', value.id).attr('style', 'font-weight: bold;color:darkred;line-height:80px;').appendTo(childInner);
                // 附加专业数量
                $('<div>').html(value.icon).attr('style', 'line-height:80px;color:navy').appendTo(childInner);
                // 附加
                $('<i>').attr('id', 'btnEdit').attr('name', value.title).attr('code', value.id).attr('class', 'fa fa-edit').attr('aria-hidden', true).appendTo(childInner);
                $('<span>').html("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp").appendTo(childInner);
                $('<i>').attr('id', 'btnDel').attr('name', value.title).attr('code', value.id).attr('class', 'fa fa-trash').attr('aria-hidden', true).appendTo(childInner);
                // 附加到
                child.appendTo(targetContainer);

            });
        }

        // ========== 响应按钮的点击 =================
        function buttonClick() {
            // == 查询按钮 ==
            $('#btnQuery').on('click', function () {
                // 发起Ajax请求
                loadData();
            });
            // == 显示全部 ==
            $('#btnAll').on('click', function () {
                // 页面重新加载
                location.reload();
            });
            // == 添加按钮 ==
            $('#btnAdd').on('click', function () {
                Operation = 1;
                // 弹出框输入
                loadLayer("添加顶级菜单");
            });
            // == 点击编辑 =====
            $('body').on('click', '#btnEdit', function () {
                let id = $(this).attr('code');
                let title = $(this).attr('name');
                let icon = $(this).prev().html();
                let data = {id: id, title: title, icon: icon};
                // 修改Operation
                Operation = 2;
                loadLayer("修改菜单信息", data);

            });

            // === 点击删除 =======
            $('body').on('click', '#btnDel', function () {
                // 获取Id和name
                let id = $(this).attr('code');
                let title = $(this).attr('name');
                let confirmStr = "您是否确认删除菜单信息【" + title + "】?";
                // 弹出确认删除的框
                layui.use('layer', function () {
                    layer.confirm(confirmStr, {icon: 3, title: '删除确认', area: ['500px', '200px']}, function (index) {
                        // Ajax请求
                        $.ajax({
                            url: "{% url 'del_menu' %}",
                            method: 'post',
                            data: {
                                id: id,
                                csrfmiddlewaretoken: "{{ csrf_token }}"
                            },
                            dataType: 'json',
                            success: function (res) {
                                if (res.status) {
                                    location.reload();
                                } else {
                                    layer.msg(res.error, {
                                        icon: 2,
                                        area: ['500px', '200px'],
                                        time: -1,
                                        btn: ['取消']
                                    })
                                }
                            }
                        })
                    })
                })
            })


        }

        // ============ 加载弹出层 =======================
        function loadLayer(title, value = "") {

            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;

                layer.open({
                    type: 1,
                    title: "<b style='color:navy'>【" + title + '】</b>',
                    btn: ['确定', '取消'],
                    area: ['400px', '300px'],
                    content: $('.layerArea'),
                    resize: false,

                    success: function (index, layero) {
                        form.val('layerForm', value);
                    },
                    yes: function (index, layero) {
                        // 清除报错信息
                        $('.error_msg').empty();
                        // 判断
                        if ($('#title').val().length === 0) {
                            $('#title').next().html("菜单名称不能为空");
                            return;
                        }
                        if ($('#icon').val().length === 0) {
                            $('#icon').next().html("图标不能为空");
                            return;
                        }
                        // 判断
                        let commitURL = "{% url 'add_menu' %}";
                        if (Operation === 2) {
                            commitURL = "{% url 'edit_menu' %}";
                        }
                        // Ajax提交
                        $.ajax({
                            url: commitURL,
                            method: 'post',
                            data: $('#layerForm').serialize(),
                            dataType: 'json',
                            success: function (res) {
                                if (res.status) {
                                    location.reload();
                                } else {
                                    layer.msg(res.error, {
                                        icon: 2,
                                        area: ['500px', '200px'],
                                        time: -1,
                                        btn: ['取消']
                                    })
                                }
                            }
                        })

                    },
                    end: function (index, layero) {
                        // 清空表单选项
                        form.val('layerForm', {
                            title: "",
                            icon: "",
                        });
                        // 清除报错信息
                        $('.error_msg').empty();
                    }
                })
            })
        }

    </script>
{% endblock %}